.menu {
  height: 100%;

  &-wrap {
    .search {
      :deep(.wd-input) {
        background-color: #f5f5f5;
        border-radius: 24rpx;
      }
    }

    .banner {
      width: 100%;
      aspect-ratio: 4 / 3;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .navbar {
      color: #555;

      &-item {
        flex: 1;
        font-size: 26rpx;

        image {
          width: 44rpx;
          height: 44rpx;
        }

        &.active {
          color: #333;
          position: relative;

          &::before {
            z-index: 2;
            content: "";
            width: 48rpx;
            height: 10rpx;
            border-radius: 32rpx;
            background-color: $main-color;
            position: absolute;
            bottom: -10rpx;
            left: 60rpx;
          }
        }
      }
    }
  }

  .main-wrap {
    flex: 1;
    background-image: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
    position: relative;
    overflow: hidden;
    padding-top: 57rpx;

    .slot-white {
      width: 100%;
      height: 25rpx;
      top: 0;
      background-color: #fff;
      position: absolute;
    }

    .left-wrap {
      width: 160rpx;
      background-color: $main-color;
      height: 100%;
      overflow: auto;

      .type-item {
        width: 100%;
        height: 132rpx;

        &.active {
          background-color: #fff;
          font-weight: bold;
        }
      }
    }

    .right-wrap {
      flex: 1;
      overflow: auto;

      .dish-list {
        border-radius: 16rpx 16rpx 0 0;
        background-color: #fff;
        box-shadow: 0 0 5px 2px #dbdbdb;

        .right {
          color: #555;
          flex: 1;
          align-items: flex-end;
          position: relative;

          &-info {
            height: 100%;
            justify-content: space-between;
          }

          .name {
            color: #333;
            font-weight: bold;
            font-size: 36rpx;
          }

          .has-num {
            font-size: 24rpx;
          }

          :deep(.wd-button) {
            position: absolute;
            right: 15rpx;
            bottom: 0;
          }
        }
      }
    }
  }

  .sure-button {
    background-color: #fff;
    z-index: 99;

    &-wrap {
      height: 102rpx;
      border-radius: 200rpx;
      width: 90%;
      margin: 8rpx auto 24rpx;
      position: relative;
      padding-left: 32rpx;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);

      .choose-wrap {
        flex: 1;

        .add-dish {
          margin-left: 32rpx;

          .tips {
            font-weight: bold;
          }

          .search {
            color: #666;
            font-size: 24rpx;
            margin-left: 32rpx;
          }
        }

        image {
          width: 56rpx;
          height: 56rpx;
        }
      }

      :deep(.wd-button) {
        height: 100%;
        background-color: $button-main-color !important;
        border-radius: 0 200rpx 200rpx 0 !important;
        min-width: 80rpx !important;
      }
    }
  }

  .has-choose-dish {
    position: absolute;
    bottom: 134rpx;
    background-color: $main-color;
    width: 100%;
    border-radius: 18rpx 18rpx 0 0;

    .header {
      justify-content: space-between;
      align-items: center;
      padding: 32rpx;
      font-size: 30rpx;
      border-radius: 18rpx 18rpx 0 0;
      background-color: #fff;

      .reset {
        align-items: baseline;
        color: #999;
      }
    }

    .dish-list {
      &-item {
        padding: 32rpx;
        padding-top: 0;

        .dish-info {
          position: relative;
          flex: 1;

          .num {
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }
      }
    }

    .empty {
      padding: 64rpx;
    }
  }

  // 我的常点
  .often {
    flex: 1;
    overflow: hidden;
  }

  // 历史订单
  .history {
    flex: 1;
    background-image: linear-gradient(
      135deg,
      rgba(255, 225, 223, 0.2) 0%,
      rgba(255, 225, 223, 0.4) 100%
    );
    overflow: hidden;
  }

  // 我要评价
  .comment {
    flex: 1;
    overflow: hidden;
  }
}
